<template>
  <section>
    <div v-if="id==2">
      <div class="fy-flex" style="justify-content: flex-end">
        <screen-button :type="'0'" @click.native="clickScreen(0)"></screen-button>
        <screen-button :type="'1'" @click.native="clickScreen(1)"></screen-button>
      </div>
      <div class="fy-flex fy-flex__column">
        <screen-default></screen-default>
        <screen-warning></screen-warning>
        <screen-equipment></screen-equipment>
      </div>
    </div>
    <div v-if="id==3">
      <screen-banner></screen-banner>
      <screen-map></screen-map>
    </div>
    <div v-if="id==4" class="fy-flex fy-flex__center" style="align-items: flex-start;">
      <screen-video></screen-video>
      <div class="right-statistics fy-flex fy-flex__column">
        <screen-statistics-other></screen-statistics-other>
        <screen-statistics></screen-statistics>
      </div>
    </div>
  </section>
</template>

<script>
import ScreenButton from "@/components/screen/ScreenButton.vue";
import ScreenDefault from "@/components/screen/ScreenDefault.vue";
import ScreenWarning from "@/components/screen/ScreenWarning.vue";
import ScreenEquipment from "@/components/screen/ScreenEquipment.vue";

import ScreenBanner from "@/components/screen/ScreenBanner.vue";
import ScreenMap from "@/components/screen/ScreenMap.vue";

import ScreenVideo from "@/components/screen/ScreenVideo.vue";
import ScreenStatistics from "@/components/screen/ScreenStatistics.vue";
import ScreenStatisticsOther from "@/components/screen/ScreenStatisticsOther.vue";

export default {
  // 全局感知
  name: "ScreenComponents",

  // 模板依赖
  components: {
    ScreenButton,
    ScreenDefault,
    ScreenWarning,
    ScreenEquipment,
    ScreenBanner,
    ScreenMap,
    ScreenVideo,
    ScreenStatistics,
    ScreenStatisticsOther
  },
  filters: {},

  // 接口
  props: {
    id: Number
  },

  // 本地状态
  data() {
    return {};
  },
  computed: {},
  // 事件
  watch: {},
  beforeCreate() {},
  created() {},
  beforeMount() {},
  mounted() {},
  beforeUpdate() {},
  updated() {},
  beforeDestroy() {},
  destroyed() {},
  // 非响应式的属性
  methods: {
    clickScreen() {

    }
  }
};
</script>

<style scoped>
.right-statistics {
  width: 20vw;
}
</style>
